<template>
  <view>
    <template v-for="(v,i) in getXChildrenMetas()">
      <xone-x
        :key="i"
        :xid="xid"
        :xmetapath="getXChildMetaPath(i)"
        :xdatapath="xdatapath"
      />
    </template>
    <!-- <u-select
      v-model="selectShow"
      :title="utilTitle"
      :list="selectData"
      :default-value="selectDefault"
      @confirm="selectConfirm"
    />
    <u-picker
      v-model="timeShow"
      mode="time"
      :title="utilTitle"
      :default-time="timeDefault"
      :params="mTimeParams"
      @confirm="timeConfirm"
    />
    <u-picker
      v-model="regionShow"
      mode="region"
      :title="utilTitle"
      :default-time="regionDefault"
      :params="mRegionParams"
      @confirm="regionConfirm"
    />
    <u-modal 
      v-model="modalInputShow"
      :title="utilTitle"
      @confirm="modalInputConfirm"
    >
      <view class="t-pad-base">
        <u-input v-model="modalInputValue" />
      </view>
    </u-modal>
    <u-popup
      v-model="videoPreviewShow"
      mode="center"
      width="100%"
      height="100%"
      :closeable="true"
    >
      <view class="t-pad-base">
        {{ utilTitle||'预览' }}
      </view>
      <video
        v-if="videoPreviewSrc"
        class="w-100 h-100"
        :src="videoPreviewSrc"
        object-fit="cover" 
        :autoplay="true"
        :loop="false"
        :controls="false"
        :show-fullscreen-btn="false"
        :show-play-btn="true"
      />
    </u-popup> -->
  </view>
</template>

<script>
  import xbase from './lowcode/component/xbase.js'
  import xcomponent from './lowcode/component/xcomponent'
  import xcontainer from './lowcode/component/xcontainer.js'
  import xcrud from './lowcode/component/xcrud.js'

  export default {
    mixins: [xbase, xcomponent, xcontainer, xcrud],
    data() {
      return {
        utilTitle: '',
        selectShow: false,
        selectData: [],
        selectDefault: undefined,
        timeShow: false,
        timeData: [],
        timeParams: {},
        timeDefault: undefined,
        regionShow: false,
        regionData: [],
        regionParams: {},
        regionDefault: undefined,
        modalInputShow: false,
        modalInputValue: '',
        videoPreviewShow: false,
        videoPreviewSrc: ''
      }
    },
    computed: {
      // mTimeParams() {
      //   return {
      //     year: true,
      //     month: true,
      //     day: true,
      //     hour: true,
      //     minute: true,
      //     second: false,
      //     ...this.timeParams
      //   }
      // },
      // mRegionParams() {
      //   return {
      //     province: true,
      //     city: true,
      //     area: true,
      //     ...this.regionParams
      //   }
      // }
    },
    methods: {
      onXUtilSelect(e) {
        if(this.selectShow) return
        this.utilTitle = e.title
        this.selectShow = true
        this.selectData = e.list
        // this.selectDefault = (e.defaultValue||e.defaultValue===0)?(Array.isArray(e.defaultValue)?e.defaultValue:[e.defaultValue]):undefined
        this.selectEvent = e.callback
      },
      onXUtilSelectByNewPage(e) {
        uni.$once(e.eventName, res=>{
          if(e.callback) e.callback(res)
        })
        this.$navigator.navigateTo(e.path, {
          title: e.title,
          eventName: e.eventName,
          ...e.params
        })
      },
      onXUtilTime(e) {
        if(this.selectShow) return
        this.utilTitle = e.title
        this.timeShow = true
        this.timeParams = e.params
        this.timeDefault = e.defaultValue
        this.timeEvent = e.callback
      },
      onXUtilRegion(e) {
        if(this.regionShow) return
        this.utilTitle = e.title
        this.regionShow = true
        this.regionParams = e.params
        this.regionDefault = e.defaultValue
        this.regionEvent = e.callback
      },
      onXUtilModalInput(e) {
        if(this.modalInputShow) return
        this.utilTitle = e.title
        this.modalInputValue = e.defaultValue||''
        this.modalInputShow = true
        this.modalInputEvent = e.callback
      },
      onXUtilVideoPreview(e) {
        if(this.videoPreviewShow) return
        this.utilTitle = e.title
        this.videoPreviewSrc = e.src
        this.videoPreviewShow = true
      },
      selectConfirm(e) {
        if(this.selectEvent) this.selectEvent(e)
      },
      timeConfirm(e) {
        if(this.timeEvent) this.timeEvent(e)
      },
      regionConfirm(e) {
        if(this.regionEvent) this.regionEvent(e)
      },
      modalInputConfirm() {
        if(this.modalInputEvent) this.modalInputEvent(this.modalInputValue)
      },
      onXUtilLocation(e) {
        uni.chooseLocation({
          success: function (res) {
            // name address latitude longitude
            if(e.callback) e.callback(res)
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
